<template>
	<view>
		<view class="u-p-l-32 u-p-r-32 u-p-t-18 u-p-b-18" style="border-bottom: 1px solid #dcdfe6">
			<Comment :info-data="info" :user-info="info.compassNormalUser" :show-replay="false" :border-bottom="false"
				:hideReply="true" :show-action="false" :eclipse="false" @reply="replyCallBack" />
		</view>

		<view style="padding-bottom: 240rpx">
			<view v-for="(item, index) in diaryReplyList" :key="index"
				class="u-p-l-32 u-p-r-32 u-p-t-18 u-p-b-18 u-border-bottom">
				<view class="u-m-b-18 u-flex u-col-center">
					<view class="u-m-r-16" @click="toPerson(item.replyUser)">
						<u-avatar :src="item.replyUser.avatar" mode="circle" size="60"></u-avatar>
					</view>
					<view class="userName u-font-28" @click="toPerson(item.replyUser)">
						<view style="display: flex; align-items: center;">
							{{item.replyUser.nickName || item.replyUser.userName || '用户名'}}
							<image :src="item.replyUser.officalFlag==='1'?'https://app.zbzedu.com/static/WaChat/img/guanfang.png':''" mode=""
								style="width: 68rpx;height: 32rpx;margin: 10rpx;"></image>
						</view>
						<view style="color: rgba(4, 4, 4, 0.38);" class="u-font-20">{{ $u.timeFrom(item.createTime) }}
						</view>
					</view>
					<view class="u-flex-1 u-text-right">
						<u-icon name="more-dot-fill" @click="showAction(item, index)" color="rgba(4, 4, 4, 0.5)"
							size="36"></u-icon>
					</view>
				</view>
				<view class="textStyle color-16 u-font-32 u-m-t-16 u-m-b-16 u-p-l-76" @click="replyClick(item)"
					style="color: rgba(16, 16, 16, 1);">
					<text v-if="item.normalUser">回复{{ item.normalUser.nickName }}：</text>
					{{item.replyDesc}}
				</view>
			</view>
			<loadMore :status="status"></loadMore>
		</view>
		<u-action-sheet :list="isCurrentUser ? delList : jubaolist" v-model="showFlag" @click="action"
			border-radius="18"></u-action-sheet>
		<view class="fixed-bottom u-border-top u-p-t-28 u-p-l-28 u-p-r-28 safe-area bg-fff"
			style="border-top: 1px solid #dcdfe6">
			<view class="u-p-b-28 u-flex flex-between">
				<view class="u-flex-1">
					<u-input v-model="replyDesc" type="textarea" height="70" border :placeholder="`回复${replyName}`"
						maxlength="-1" />
				</view>
				<view class="u-text-center pub-btn font-b u-font-28 u-m-l-34" @click="reply">发送</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Comment from '../../pages/forum/components/Comment'
	import {
		request
	} from '../../util/api'
	import {
		TOAST
	} from '../../util/util'
	import loadMore from '../../components/loadMore'
	import {
		THEME
	} from '../../pages/mixins/config.js'
	import {
		getCurrentFullPath
	} from "../../util/util";
	export default {
		name: 'comment',

		onLoad(option) {
			if (option.commentId) {
				this.commentId = option.commentId
				this.old_commentId = option.commentId
			}
			if (option.diaryId) {
				this.diaryId = option.diaryId
			}
		},

		data() {
			return {
				old_commentId: '',
				commentId: '',
				diaryId: '',
				uId: '',
				info: {},
				replyDesc: '',
				replyUser: '',
				replyName: '',
				diaryReplyList: [],
				status: 'loading',
				currentinfoData: {},
				currentIndex: 0,
				showFlag: false,
				jubaolist: [{
					text: '举报',
					color: THEME.text_active_color
				}],
				delList: [{
					text: '删除',
					color: '#FF0101'
				}]
			}
		},

		computed: {
			isCurrentUser() {
				if (this.currentinfoData.replyUId) {
					return this.currentinfoData.replyUId === uni.getStorageSync(process.env.NODE_ENV + 'zbz_user').userId
				}
				return false
			}
		},

		onShow() {
			this.getDetails()
		},

		methods: {
			// 转发功能
			onShareAppMessage(res) {
				return {
					path: getCurrentFullPath()
				}
			},
			action() {
				if (this.isCurrentUser) {
					uni.showModal({
						title: '提示',
						content: '确认删除该评价吗？',
						success: res => {
							if (res.confirm) {
								request({
									url: '/system/CompassDiaryReply/' + this.currentinfoData.id,
									method: 'DELETE'
								}).then(res => {
									TOAST('删除成功!')
									this.diaryReplyList.splice(this.currentIndex, 1)
								})
							}
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '确认举报该评价吗？',
						success: res => {
							if (res.confirm) {
								request({
									url: '/system/DiaryReport',
									method: 'post',
									data: {
										linkId: this.currentinfoData.id,
										linkType: 3
									}
								}).then(res => {
									TOAST('举报成功!')
								})
							}
						}
					})
				}

			},

			showAction(data, index) {
				this.currentinfoData = data
				this.showFlag = true
				this.currentIndex = index
			},

			replyCallBack() {
				this.uId = ''
				this.replyName = ''
			},

			getDetails() {
				request({
					url: '/system/CompassDiaryComment/' + this.commentId
				}).then(res => {
					this.status = 'finished'
					res.data.diaryReplyList.forEach(item => {
						item.createTime = new Date(item.createTime.replace(/-/g, '/')).getTime()
					})
					res.data.createTime = new Date(res.data.createTime.replace(/-/g, '/')).getTime()
					this.info = res.data
					this.diaryReplyList = res.data.diaryReplyList
				})
			},

			reply() {
				request({
					url: '/system/CompassDiaryReply',
					method: 'post',
					data: {
						replyDesc: this.replyDesc,
						commentId: this.commentId,
						diaryId: this.diaryId,
						uid: this.uId
					}
				}).then(res => {
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2];
					try {
						prevPage.$vm.pageNum = 1
						prevPage.$vm.comments = []
						prevPage.$vm.getGlobalData()
					} catch (e) {

					}
					TOAST('回复成功！')
					this.replyDesc = ''
					this.getDetails()
				})
			},

			replyClick(data) {
				// this.commentId = data.id
				this.uId = data.replyUId
				this.replyName = data.replyUser.nickName
			},

			toPerson(data) {
				console.log(data)
			}
		},

		components: {
			Comment,
			loadMore
		}
	}
</script>

<style scoped lang="scss">
	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 10;
	}

	.textStyle {
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
	}

	.pub-btn {
		width: 148rpx;
		height: 62rpx;
		line-height: 62rpx;
		border-radius: 8rpx;
		background-color: rgba(42, 108, 172, 100);
		color: #fff;
	}

	.userName {
		color: rgba(4, 4, 4, 1);
	}
</style>
